<template>
  <div class="button-box">
    <div v-for="(style, index) in styleList" :key="index" class="button-list">
      <div
        v-if="showDialog"
        class="button-list-name"
      >{{getStyleName(style, index)}}</div>
      <div
        v-else
        class="button-list-name"
      >
        <div
          v-for="(option, index) in optionsList"
          :key="index"
          class="list-item"
        >
          <Component
            :is="'ac-' + option.fieldType"
            v-model="style[option.fieldName]"
            v-bind="cleanProp(option)"
            v-bind:fieldList="fieldList"
            size="small"
            :placeholder="option.name"
            :title="option.description"
          />
        </div>
      </div>
      <div :class="['button-list-button', showDialog ? 'is-dialog' : '']">
        <ac-icon
          v-if="index > 0 && index < (styleList || []).length"
          iconId="018fa3973ded010d7ef2"
          title="上移"
          style="cursor: pointer"
          @click="moveItemUp(index, styleList)"
        />
        <ac-icon
          v-if="index < (styleList || []).length - 1"
          iconId="018fa397630c01052d7e"
          title="下移"
          style="cursor: pointer"
          @click="moveItemDown(index, styleList)"
        />
        <ac-icon
          v-if="showDialog"
          iconId="018dca6db20c6a3aaf68"
          title="编辑"
          color="#409EFF"
          size="16"
          style="cursor: pointer"
          @click="editStyle(style)"
        />
        <ac-icon
          v-if="showDialog"
          iconId="018dc9c3efb82f31c161"
          title="复制"
          color="#21D914FF"
          size="16"
          style="cursor: pointer"
          @click="copyStyle(style)"
        />
        <ac-icon
          iconId="018dc9c3efd3a0502886"
          title="删除"
          color="red"
          size="16"
          style="cursor: pointer"
          @click="deleteStyle(index)"
        />
      </div>
    </div>
    <div class="button-add-box">
      <div class="button-add" @click="addStyle">
        <ac-icon iconId="018dca3b4707c4c43a2f" />
        <span style="margin-left: 5px;font-size:13px">添加数据</span>
      </div>
    </div>
    <el-drawer
      v-model="visible"
      size="370px"
      class="dark-drawer-box"
      :close-on-click-modal="false"
      :with-header="false"
      destroy-on-close
    >
      <div class="drawer-body">
        <div class="collapse-box">
          <el-collapse v-model="collapseNames">
            <el-collapse-item
              v-for="(group, index) in optionsList"
              :key="index"
              :title="group.name"
              :name="group.name"
            >
              <div
                v-for="(style, index2) in group.children"
                :key="index2"
                class="setting-item"
              >
                <el-tooltip
                  v-if="style.description"
                  placement="left"
                  :content="style.description"
                  popper-class="padding-10-15"
                >
                  <span class="label">{{style.name}}：</span>
                </el-tooltip>
                <span v-else-if="style.name" class="label">{{style.name}}：</span>
                <span class="content">
                <Component
                  :is="'ac-' + style.fieldType"
                  v-model="currStyle[style.fieldName]"
                  v-bind="cleanProp(style)"
                  v-bind:fieldList="fieldList"
                  size="small"
                />
              </span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <template #footer>
        <el-button
          size="default"
          type="info"
          @click="visible=false"
        >取消</el-button>
        <el-button
          type="primary"
          size="default"
          @click="submitForm"
        >确定</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, computed } from 'vue';
import tool from "@/utils/tool";

const props = defineProps({
  fieldList: String,
  defaultStyle: Object,
  options: Array,
  showDialog: {
    type: Boolean,
    default: true
  }
});
const styleList = defineModel();
const collapseNames = ref([]);
const visible = ref(false);
const currStyle = ref({});

const cleanProp = (data) => {
  const clone = tool.deepClone(data);
  let result = {};
  for (let p in clone) {
    if (p === 'optionsFieldList' && clone[p]) {
      result['optionsFieldList'] = true;
      result['options'] = props.fieldList;
    } else if (p !== 'name'
        && p !== 'fieldName'
        && p !== 'fieldType'
        && p !== 'default'
        && p !== 'description'
        && p !== 'show'
        && typeof clone[p] !== 'function') {
      result[p] = clone[p];
    }
  }
  return result;
};

const addStyle = () => {
  currStyle.value = { id: tool.uuids() };
  initStyleByDefault(currStyle.value, props.options);
  Object.assign(currStyle.value, props.defaultStyle || {});

  if (props.showDialog) {
    visible.value = true;
  } else {
    styleList.value.push(currStyle.value);
  }
};

const editStyle = (style) => {
  currStyle.value = tool.deepClone(style);
  visible.value = true;
};

const copyStyle = (style) => {
  currStyle.value = tool.deepClone(style);
  currStyle.value.id = tool.uuid();
  styleList.value.push(currStyle.value);
  visible.value = true;
};

const deleteStyle = (index) => {
  styleList.value.splice(index, 1);
};

const getStyleName = (style, index) => {
  if (style.conditionList && style.conditionList.length > 0 && style.conditionList[0].value) {
    return style.conditionList[0].value;
  }
  return style.name || style.label || '序号' + (index+1);
};

const submitForm = () => {
  const find = styleList.value.find(item => item.id === currStyle.value.id);
  if (find) {
    Object.assign(find, currStyle.value);
  } else {
    styleList.value.push(currStyle.value);
  }
  visible.value = false;
};

const initStyleByDefault = (style, list) => {
  list.forEach(item => {
    if (item.type !== 'group' && item.fieldName) {
      style[item.fieldName] = style[item.fieldName] || item.default;
    }
    if (item.children && item.children.length > 0) {
      initStyleByDefault(style, item.children);
    }
  });
};

const optionsList = computed(() => {
  return (tool.deepClone(props.options) || [])
    .filter(item => !item.show || item.show(currStyle.value))
    .map(item => {
      if (item.children) {
        item.children = item.children.filter(item => !item.show || item.show(currStyle.value));
      }
      return item;
    });
});

const moveItemUp = (index, list) => {
  let curr = list[index];
  list[index] = list[index - 1];
  list[index - 1] = curr;
};

const moveItemDown = (index, list) => {
  let curr = list[index];
  list[index] = list[index + 1];
  list[index + 1] = curr;
};

onMounted(() => {
  props.options.forEach(item => collapseNames.value.push(item.name));
  styleList.value.forEach(style => {
    if (!style.id) {
      style.id = tool.uuid();
    }
  });
});

onBeforeMount(() => {
  if (!styleList.value) {
    styleList.value = [];
  }
});
</script>

<style scoped lang="scss">
.drawer-body {
  height: 100%;
  display: flex;
  flex-direction: row;
  :deep(.el-collapse) {
    --el-collapse-border-color: unset!important;
    --el-collapse-header-height: 35px;
    --el-collapse-header-bg-color: #333!important;
    --el-collapse-header-text-color: white;
    --el-collapse-content-bg-color: #555555;
    --el-collapse-content-text-color: white;
    border-bottom: 1px solid #666666;
    border-top: none!important;
    .el-collapse-item {
      border-bottom: 1px solid #444;
    }
    .el-collapse-item:last-child {
      border-bottom: none;
    }
    .el-collapse-item__header {
      text-indent: 20px;
    }
    .el-collapse-item__content {
      padding-bottom: 0!important;
    }
  }
  :deep(.el-tree) {
    padding: 8px;
    background: #555555;
    color: #dcdcdc;
    width: 100%;
    --el-tree-node-content-height: 26px;
    --el-tree-node-hover-bg-color: #333;
    --el-tree-text-color: #dcdcdc;
    --el-tree-expand-icon-color: #dcdcdc;
  }
  :deep(.el-tree-node.is-current)>.el-tree-node__content {
    background: #333!important;
  }
  :deep(.el-input) {
    --el-input-text-color: #dcdcdc;
    --el-input-border-color: none;
    --el-input-bg-color: #333;
    --el-input-hover-border-color: none;
    --el-disabled-bg-color: #333;
    --el-disabled-border-color: none;
    -webkit-text-fill-color: #cccccc;
    .el-input__inner, .el-textarea__inner, .el-checkbox, .el-checkbox__label {
      color: #cccccc !important;
    }
  }
  :deep(.el-input).is-disabled {
    --el-input-text-color: #dcdcdc;
    --el-input-border-color: none;
    --el-input-bg-color: #333;
    --el-input-hover-border-color: none;
    --el-disabled-bg-color: #333;
    --el-disabled-border-color: none;
    -webkit-text-fill-color: #cccccc;
    .el-input__inner, .el-textarea__inner, .el-checkbox, .el-checkbox__label {
      color: #cccccc !important;
      -webkit-text-fill-color: #cccccc !important;
    }
  }
  :deep(.el-textarea) .el-textarea__inner {
    background: #333!important;
    box-shadow: none;
    color: #dcdcdc!important;
  }
  :deep(.el-select) .el-input__inner {
    border: none!important;
  }
  :deep(.el-select) {
    .el-select__wrapper {
      background: #333;
      color: #dcdcdc!important;
      box-shadow: none;
    }
    .el-input__inner {
      border-color: #666;
    }
    .el-select__placeholder {
      border: none!important;
      color: #dcdcdc!important;
    }
  }
  :deep(.el-checkbox) {
    margin-right: 15px;
    .el-checkbox__label {
      color: #dcdcdc!important;
    }
    .el-checkbox__input .el-checkbox__inner {
      background: rgb(180, 180, 180);
      border-color: rgb(180, 180, 180);
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background: #333;
      border-color: #333;
    }
  }
  :deep(.el-radio) {
    margin-right: 15px;
    .el-radio__label {
      color: #dcdcdc!important;
    }
    .el-radio__input .el-radio__inner {
      background: rgb(180, 180, 180);
      border-color: rgb(180, 180, 180);
    }
    .el-radio__input.is-checked .el-radio__inner {
      background: #333;
      border-color: #333;
    }
  }
  :deep(.ac-icon-select) {
    border-color: #333;
    background: #333;
    color: #dcdcdc;
  }
  :deep(.el-switch) .el-switch__core {
    background: #b4b4b4;
    border-color: #b4b4b4;
  }
  :deep(.el-switch).is-checked .el-switch__core {
    background: #333;
    border-color: #333;
  }
  :deep(.el-input-number--small .el-input__wrapper) {
    padding-left: 5px!important;
  }
  .collapse-box {
    flex-grow: 1;
    overflow: auto;
    :deep(.el-collapse-item__wrap) {
      padding: 2px 0;
      background: #555555!important;
    }
  }
  .setting-item {
    color: white;
    display: flex;
    flex-direction: row;
    padding: 2px 3px;
    .label {
      width: 90px;
      height: 24px;
      flex-shrink: 0;
      color: #dcdcdc;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      font-size: 13px;
    }
    .content {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      overflow: hidden;
    }
    :deep(.el-radio-button) {
      --el-radio-button-checked-bg-color: #555;
      --el-radio-button-checked-text-color: #dcdcdc;
      --el-radio-button-checked-border-color: #333;
      --el-radio-button-disabled-checked-fill: #333;
    }
    :deep(.el-radio-button) .el-radio-button__inner {
      color: #dcdcdc;
      background: #555555;
      border-right: 1px solid #333;
      border-top: 1px solid #333;
      border-bottom: 1px solid #333;
      padding: 5px 6px;
    }
    :deep(.el-radio-button:first-child) .el-radio-button__inner {
      border-left: 1px solid #333;
    }
    :deep(.el-radio-button).is-active .el-radio-button__inner {
      background: #333!important;
    }
  }
}
.button-box {
  color: #dcdcdc;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  .button-list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    .button-list-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 1px;
      flex: 1;
    }
    .button-list-button {
      width: 60px;
      justify-content: flex-end;
      align-items: center;
      display: flex;
      gap: 5px;
      &.is-dialog {
        width: 100px;
      }
    }
  }
  .button-add-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 8px;
    color: #dcdcdc;
    .button-add {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>